<!--
 * @Author: your name
 * @Date: 2020-10-27 18:14:31
 * @LastEditTime: 2021-10-20 16:09:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/components/CircleInfo/index.vue
-->
<template>
  <div class="circle-info">
    <span v-for="(item,index) in data" :key="index">
      <i :style="{'background': item.value ? item.value : getColor}"></i>
      {{item.label || item.lable}}
    </span>
  </div>
</template>

<script>
import { color16 } from '@front/common/utils'
export default {
  name: 'CircleInfo',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getColor () {
      return color16()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .circle-info{
    padding: 0 5px;
    font-size:13px;
    span{
      position: relative;
      padding: 0 5px 0 10px;
      text-align: left;
      i{
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: red;
      }
    }
  }
</style>
